<template>
  <div>
    <!-- 
            msg 子组件的属性  父组件传参用
            @father 子组件定义事件名 必须与Test2中下面的this.$emit('father', this.son)这里的father相对应 ，可自定义
            GetData 负责获取子组件的数据的方法
         -->
    <Test2 :msg="msg" @father="GetData"></Test2>
    <Test3 :TrData="TrData" /><!-- 使用Test3模板并导入数据 -->
    <Test4 />
  </div>
</template>
<script>  
import Test from './Test.vue'
import Test2 from './Test2.vue'
import Test3 from './Test3.vue'
import Test4 from './Test4(使用elementui插件).vue'
export default {
  components: {
    Test: Test,
    Test2: Test2,
    Test3: Test3,
    Test4: Test4,
  },
  created() {},
  data() {
    return {
      msg: '测试',
      num: 111,
    //   调用子组件的props里面的TrData
      TrData: [
        {
          id: 1,
          name: 'admin',
          sex: '男',
          age: 18,
        },
        {
          id: 2,
          name: 'demo',
          sex: '男',
          age: 20,
        },
      ],
    }
  },
  computed: {},
  methods: {
    GetData(res) {
      console.log(res) //这是子组件
    },
  },
}
</script>
<style scoped>
</style>